<template>
  <div id="module-root" class="g-bd4 f-cb">
    <!-- 左侧内容 节目详情+评论 -->
    <div class="g-mn4">
      <div class="g-mn4c">
        <div class="g-wrap6">
          <!-- 详情信息 -->
          <div class="m-info m-info-program f-cb">
            <div class="cover u-cover u-cover-program">
              <img :src="programDetial.coverUrl" />
            </div>
            <div class="cnt">
              <div class="cntc">
                <div class="topblk2">
                  <div class="hd f-cb">
                    <i class="f-fl u-icn2 u-icn2-7"></i>
                    <div class="tit tit3">
                      <h2 class="f-ff2">
                        {{ programDetial.name }}
                      </h2>
                    </div>
                  </div>
                  <div class="rdiname">
                    <i class="icon u-icn2 u-icn2-8 f-fl"></i>
                    <a
                      :title="programDetial.radio.name"
                      href="javascript:;"
                      class="f-fl f-fs2 f-ff2 s-fc3"
                    >
                      {{ programDetial.radio.name }}
                    </a>
                    <span class="j-flag"
                      ><a class="u-btni u-btni-dy" href="javascript:void(0)"
                        ><i
                          ><em class="u-icn2 u-icn2-dy"></em>订阅({{
                            programDetial.radio.subCount
                          }})</i
                        ></a
                      ></span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 介绍 -->
          <div class="m-prointr">
            <div class="btns f-cb j-flag">
              <a class="u-btni u-btni-play" href="#"
                ><i>播放 {{ playTime }}</i></a
              ><a
                href="javascript:void(0)"
                hidefocus="true"
                class="u-btn2 u-btn2-1 u-btn2-icn"
                ><i
                  ><em class="icn icn-praise"></em
                  ><span class="f-fl">({{ programDetial.likedCount }})</span></i
                ></a
              ><a
                class="u-btni u-btni-cmmt"
                href="javascript:void(0)"
                hidefocus="true"
                ><i>({{ programDetial.commentCount }})</i></a
              ><a
                class="u-btni u-btni-share"
                href="javascript:void(0)"
                hidefocus="true"
                ><i>({{ programDetial.shareCount || 分享 }})</i></a
              ><a class="u-btni u-btni-dl" href="javascript:;"><i>下载</i></a
              ><span class="u-outlink"
                ><i class="u-icn u-icn-95"></i>
                <a class="s-fc7" href="javascript:void(0)">生成外链播放器</a
                ><a></a
              ></span>
            </div>
            <div class="sub">
              <a
                href="javascript:;"
                @click="
                  goRoute(
                    '/find/newsradio/radiotype/',
                    programDetial.radio.categoryId
                  )
                "
                class="cat u-type u-type-red"
                >{{ programDetial.radio.category }}</a
              >
              <strong class="f-fs1"
                ><span
                  class="f-thide f-ib f-vam"
                  :title="programDetial.radio.name"
                  >{{ programDetial.radio.name }}</span
                >
                第{{ programDetial.serialNum }}期</strong
              >
              <span class="s-fc4 sep"
                >{{
                  programDetial.createTime | timefmt("YYYY-MM-DD")
                }}
                创建</span
              >
              <span class="sep s-fc4"
                >播放：<em id="play-count" class="f-fw1 s-fc6">{{
                  programDetial.listenerCount
                }}</em
                >次</span
              >
            </div>
            <p id="full-description" class="s-fc3">
              介绍: {{ programDetial.description }}
            </p>
          </div>
          <!-- 评论组件 -->
          <Comment :type="type" :id="id"></Comment>
        </div>
      </div>
    </div>

    <!-- 右侧的内容  可以引入组件 -->
    <div class="g-sd4">
      <div class="g-wrap7">
        <MultiDownLoad></MultiDownLoad>
      </div>
    </div>
  </div>
</template>
<script>
import Comment from "@/components/Comment";
import MultiDownLoad from "@/components/MultiDownLoad";

// import mixin from "@/components/Mixin/mixin";
export default {
  // mixins: [mixin],
  data: () => ({
    type: "dj",
    id: 0,
    programDetial: null,
    playTime: "",
  }),
  created() {
    this.id = this.$route.params.id;
    this.getRadioDetail(this.id);
  },
  methods: {
    async getRadioDetail(id) {
      const {
        data: { program },
      } = await this.Api.wjwApi.getRadioDetail(id);
      this.programDetial = program;
      // console.log(program);
      this.getPlayTime(program.duration);
    },
    getPlayTime(time) {
      let mm = parseInt(time / 60000);
      let ss = parseInt((time % 60000) / 1000);
      if (mm < 10) {
        mm = mm != 0 ? "0" + mm : "00";
      }
      if (ss < 10) {
        ss = ss != 0 ? "0" + ss : "00";
      }
      this.playTime = mm + "分" + ss + "秒";
    },
  },
  components: {
    Comment,MultiDownLoad
  },
};
</script>
<style lang="less">
a,
a *,
.f-hand,
.f-hand * {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
a {
  text-decoration: none;
  color: #333;
}
em,
i {
  font-style: normal;
}
.g-bd,
.g-bd1,
.g-bd2,
.g-bd3,
.g-bd4,
.g-bd5,
.g-bd6,
.g-bd7 {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.g-mn4 {
  float: left;
  width: 100%;
  margin-right: -270px;
}
.g-mn4c {
  margin-right: 271px;
}
.g-wrap6 {
  padding: 47px 30px 40px 39px;
  border-right: 2px solid #eee;
}
.m-info-program .cover {
  padding: 3px;
  border: 1px solid #d5d5d5;
}
.m-info .cover {
  float: left;
  position: relative;
  display: inline;
  margin: 0 -220px 0 0;
}
.u-cover-program {
  width: 140px;
  height: 140px;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.m-info .cnt {
  float: right;
  width: 100%;
}
.m-info-program .cntc {
  margin-left: 170px;
}
.m-info-program .topblk2 {
  padding-top: 18px;
}
.m-info-program .topblk2 .hd {
  margin-bottom: 29px;
}
.m-info .hd {
  position: relative;
  margin: 0 0 12px;
  line-height: 24px;
}
.u-icn2 {
  background: url("../../../../assets/wjwimgs/icon2.png") no-repeat 0 9999px;
}
.u-icn2-7 {
  width: 73px;
  height: 24px;
  background-position: 0 -75px;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.m-info .tit {
  margin-left: 64px;
  position: relative;
}
.m-info .tit3 {
  margin-left: 80px;
}
.m-info .hd h2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.m-info-program .rdiname {
  line-height: 26px;
}
.m-info-program .rdiname .icon {
  margin: 5px 7px 0 0;
}
.u-icn2-8 {
  width: 16px;
  height: 17px;
  background-position: -50px -20px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.f-fs2 {
  font-size: 16px;
}
.u-btn2,
.u-btn2 i,
.u-btn2 .icn,
.u-btni,
.u-btni i,
.u-tag,
.u-tag i,
.u-btni-addply .ply {
  background: url("../../../../assets/wjwimgs/button2.png") no-repeat 0 9999px;
}
.u-btni,
.u-btni:hover {
  color: #333;
  text-decoration: none;
}

.u-btni {
  padding: 0 5px 0 0;
  white-space: nowrap;
}
.u-btni,
.u-btni i {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
}
.u-btni-play i {
  color: #fff;
  background-position: 0 -633px;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.m-prointr {
  margin-top: 20px;
}
.m-prointr .btns {
  margin-bottom: 25px;
}
.m-prointr .btns .u-btni,
.m-prointr .btns .u-btn2 {
  float: left;
  margin-right: 10px;
}

.u-btni-play {
  color: #fff;
  background-position: right -676px;
}

.u-btni i {
  padding: 0 7px 0 36px;
}
.m-info-program .rdiname .u-btni-dy {
  margin-left: 17px;
}
.u-btni-dy {
  background-position: right -2400px;
}
.u-btni-dy i {
  padding: 0 10px;
  background-position: 0 -2370px;
}
.u-btni-dy .u-icn2 {
  float: left;
  margin: 7px 4px 0 0;
}
.u-icn2-dy,
.u-icn2-ydy {
  width: 14px;
  height: 14px;
  background-position: -50px 0;
}
.m-prointr .btns .u-btni,
.m-prointr .btns .u-btn2 {
  float: left;
  margin-right: 10px;
}
.u-btn2-1 {
  color: #333;
  background-position: right -100px;
}
.u-btn2,
.u-btn2:hover {
  text-decoration: none;
}
.u-btn2 {
  padding: 0 5px 0 0;
  white-space: nowrap;
}
.u-btn2,
.u-btn2 i {
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}
.u-btn2-icn i {
  padding: 0 5px 0 10px;
  color: #333;
  background-position: 0 -59px;
  pointer-events: none;
}
.u-btn2 .icn-praise,
.u-btn2 .icn-praised {
  width: 17px;
  height: 15px;
  margin: 8px 6px 0 0;
  background-position: 0 -95px;
}
.u-btn2 .icn {
  float: left;
}
.f-fl {
  float: left;
}
.f-fr {
  float: right;
}
.u-btni-share,
.u-btni-fav,
.u-btni-cmmt,
.u-btni-dl {
  background-position: right -1020px;
}
.u-btni-cmmt i {
  background-position: 0 -1465px;
}
.u-btni-share i,
.u-btni-fav i,
.u-btni-cmmt i,
.u-btni-dl i,
.u-btni-unfav i {
  padding-right: 2px;
  padding-left: 28px;
}
.u-btni-share i {
  background-position: 0 -1225px;
}
.u-btni-dl i {
  background-position: 0 -2761px;
}
.u-outlink {
  float: left;
  margin-left: 16px;
  margin-top: 7px;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../../../assets/wjwimgs/icon.png") no-repeat 0 9999px;
}
.u-icn-95 {
  width: 16px;
  height: 16px;
  background-position: -34px -863px;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.s-fc7,
a.s-fc7:hover {
  color: #0c73c2;
}
.m-prointr .sub {
  height: 35px;
  line-height: 35px;
}
.m-prointr .cat {
  margin: -3px 9px 0 0;
  position: relative;
}

.u-type {
  display: inline-block;
  position: relative;
  top: -1px;
  height: 16px;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid #999;
  line-height: 16px;
  color: #999;
  vertical-align: middle;
  font-size: 12px;
}
.u-type-red {
  color: #cc0000;
  border-color: #cc0000;
}
.f-fs1 {
  font-size: 14px;
}
.m-prointr .f-thide {
  padding-bottom: 2px;
  max-width: 42%;
  margin-right: 5px;
}
.f-vam,
.f-vama * {
  vertical-align: middle;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.f-ib {
  display: inline-block;
}
.m-prointr .sub .sep {
  margin-left: 18px;
}
.s-fc4,
a.s-fc4:hover {
  color: #999;
}

.f-fw1 {
  font-weight: bold;
}
.s-fc6,
a.s-fc6:hover {
  color: #c20c0c;
}
.m-prointr p {
  line-height: 23px;
}
.f-hide,
.js-hide {
  display: none !important;
}
.u-icn-69,
.u-icn-70 {
  width: 11px;
  height: 8px;
  background-position: -65px -520px;
}
.s-fc3:hover {
  text-decoration: none;
}
.g-sd4 {
    position: relative;
    float: right;
    width: 270px;
    zoom: 1;
}
.g-wrap7 {
    padding: 20px 40px 40px 30px;
}
.u-icn2-7 {
    width: 73px;
    height: 24px;
    background-position: 0 -75px;
}
</style>
